<template>
  <e-dialog ref="dialog" :title="title" width="400px" :defaultFooter="false">
    <el-form :model="form" class="e-form">
      <el-form-item>
        <el-input
          v-model="form.name"
          placeholder="材料名称">
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
      </el-form-item>

      <el-form-item class="form-item-btn">
        <el-button class="long-btn" type="primary" @click="handleForm">保存</el-button>
      </el-form-item>
    </el-form>
  </e-dialog>
</template>

<script>
import eDialog from '@/components/dialog';
import {addMaterialDepart, editMaterialDepart} from '@/utils/api';
export default {
  components: {eDialog},
  data () {
    return {
      title: '新建工程',
      form: {},
      template: [
        {label: '默认报价'},
        {label: '工装报价单'},
        {label: '家装模板'}
      ]
    }
  },
  methods: {
    openDialog (obj) {
      if (obj) {
        this.form = Object.assign({}, obj);
        this.title = '编辑材料';
      } else {
        this.form = {};
        this.title = '新建材料';
      }
      this.$refs.dialog.openDialog();
    },
    handleForm () {
      const params = {
        name: this.form.name,
        id: this.form.id
      }
      if (!params.name) {
        this.$message.warning('请填材料名称');
        return false;
      }

      if (params.id) {
        editMaterialDepart(params).then((res) => {
          this.$refs.dialog.closeDialog();
          this.$message.success('编辑成功');
          this.$emit('handleSuccess');
        })
      } else {
        addMaterialDepart(params).then((res) => {
          this.$refs.dialog.closeDialog();
          this.$message.success('创建成功');
          this.$emit('handleSuccess');
        })
      }
    }
  }
}
</script>
